<template>
    <div class="container">
        <div class="row">
            <div class="banner" :style="{backgroundImage:`url(${banner})`}">
                <div class="banner_wrap">
                    <div class="business">
                        <div class="title">
                            <h1>全赞，引领新商机</h1>
                            <span>以丰富的资源，引领新时代商务方案</span>
                        </div>
                        <div class="circle">
        
                        </div>
                        <div class="understand" @click = "understandFn">
                            了解我们
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrap  d-none d-lg-block">
                <div class="cooperation ">
                    <div class="title">
                        <img src="@static/channel/condition.png">
                    </div>
                    <div class="content">
                        <div class="message">
                            <div class="top">
                                <img src="@static/channel/qualifications.png">
                            </div>
                            <div class="middle">
                                <img src="@static/channel/qualifications_bg.png">
                            </div>
                            <div class="bottom">
                                有合法营业执照和独立法
                                人代表，有良好商业信誉
                                和口碑。
                            </div>
                        </div>
                        <div class="message">
                            <div class="top">
                                <img src="@static/channel/sale.png">
                            </div>
                            <div class="middle">
                                <img src="@static/channel/sale_bg.png">
                            </div>
                            <div class="bottom">
                                专职销售团队，具有互联
                                网或SaaS领域的代理或
                                销售经营背景
                            </div>
                        </div>
                        <div class="message">
                            <div class="top">
                                <img src="@static/channel/resources.png">
                            </div>
                            <div class="middle">
                                <img src="@static/channel/resource.png">
                            </div>
                            <div class="bottom">
                                拥有当地丰富的企业级资
                                源或线下门店资源。
    
                            </div>
                        </div>
                    </div>
                    <div class="culture">
                        <div class="message">
                            <div class="top">
                                <img src="@static/channel/industry_bg.png">
                            </div>
                            <div class="middle">
                                <img src="@static/channel/industry.png">
                            </div>
                            <div class="bottom">
                                有互联网背景，对社交电
                                商、SaaS行业有了解。
                            </div>
                        </div>
                        <div class="message">
                            <div class="top">
                                <img src="@static/channel/culture_bg.png">
                            </div>
                            <div class="middle">
                                <img src="@static/channel/culture.png">
                            </div>
                            <div class="bottom">
                                认同全赞产品价值和文化
                                理念，愿意跟全赞长期合
                                作。
                            </div>
                        </div>
                    </div>
                </div>
                <div class="apply">
                    <div class="title">
                        <img src="@static/channel/apply_way.png">
                    </div>
                    <div class="con">
                        <div class="appl">
                            <img src="@static/channel/apply.png">
                        </div>
                        <div class="arrow">
                            <img src="@static/channel/process.png">
                        </div>
                        <div class="downline">
                            <img src="@static/channel/examine.png">
                        </div>
                        <div class="arrow">
                            <img src="@static/channel/process.png">
                        </div>
                        <div class="what">
                            <img src="@static/channel/what.png">
                        </div>
                        <div class="arrow">
                            <img src="@static/channel/process.png">
                        </div>
                        <div class="last">
                            <img src="@static/channel/cooperation.png">
                        </div>
    
                    </div>
                </div>
                <div class="immediately">
                    立即合作
                </div>
            </div>
            <div class="wrap_block d-lg-none">
                <div class="cooperation">
                    <div class="title">
                        <img src="@static/channel/condition.png">
                    </div>
                    <div class="content">
                        <div class="message">
                            <div class="middle">
                                <img src="@static/channel/qualifications_bg.png">
                            </div>
                            <div class="bottom">
                                有合法营业执照和独立法
                                人代表，有良好商业信誉
                                和口碑。
                            </div>
                        </div>
                        <div class="message">
                            <div class="middle">
                                <img src="@static/channel/sale_bg.png">
                            </div>
                            <div class="bottom">
                                专职销售团队，具有互联
                                网或SaaS领域的代理或
                                销售经营背景
                            </div>
                        </div>
                        <div class="message">
                            <div class="middle">
                                <img src="@static/channel/resource.png">
                            </div>
                            <div class="bottom">
                                拥有当地丰富的企业级资
                                源或线下门店资源。
    
                            </div>
                        </div>
                    </div>
                    <div class="culture">
                        <div class="message">
                            <div class="middle">
                                <img src="@static/channel/industry.png">
                            </div>
                            <div class="bottom">
                                有互联网背景，对社交电
                                商、SaaS行业有了解。
                            </div>
                        </div>
                        <div class="message">
                            <div class="middle">
                                <img src="@static/channel/culture.png">
                            </div>
                            <div class="bottom">
                                认同全赞产品价值和文化
                                理念，愿意跟全赞长期合
                                作。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            apply:4,
            banner:require("@static/channel/banner.png")
        }
    },
    methods:{
        understandFn(){
            this.scrollWindow(500,600)
            this.$emit('understandFn',this.apply)
            console.log("A")
        },
        scrollWindow(x,y){
            window.scrollTo(x,y);
        }
    }
}
</script>

<style scoped lang="stylus">
@media (min-width: 300px) {
    .container{
        .row{
            .banner{
                width:90% !important
                margin:0 5% !important
                height:200px !important
                .banner_wrap{
                    .business{
                        height:100px !important
                        .title{
                            h1{
                                font-size:15px !important
                                line-height:30px !important
                            }
                            span{
                                font-size:15px !important
                                line-height:30px !important

                            }
                        }
                        .understand{
                            padding:5px 10px !important
                        }
                        
                    }
                }
            }
            .wrap_block{
                width:90%
                margin:0 5%
                .title{
                    width:118px
                    height:28px
                    margin:50px auto
                    position:relative
                    &:before{
                        content:''
                        display:block
                        width:152px
                        height:2px
                        background-color:#424C8F
                        position:absolute
                        top: 38px;
                        left: -16px;
                    }
                        
                }
                .content,.culture{
                    display:flex
                    flex-direction:column
                    justify-content: space-between
                    .message{

                        .middle{
                            width:100px
                        }
                        .bottom{
                            margin:20px 0
                            line-height:25px
                        }

                    }
                }
            }
            
        }
    }
}

@media (min-width: 920px) {
    .container{
        .row{
            width:100% !important

            .banner{
                width:100% !important
                height:400px !important
                margin:0 !important
                .banner_wrap{
                    height:400px !important

                    .business{
                        height:200px !important
                        .title{
                            h1{
                                font-size:35px !important
                                line-height:50px !important
                            }
                            span{
                                font-size:25px !important
                                line-height:30px !important

                            }
                        }
                    }
                }
            }
        }
    }
}
.container
    .row
        img
            width:100%
            height:100%
        .banner
            width:100%
            height:483px
            background-size:cover
            // background:center 
            .banner_wrap
                // width:1200px
                height:100%
                margin:0 auto
                position:relative

                .business
                    position:absolute
                    left:50%
                    top:50%
                    transform:translate(-50%,-50%)
                    // width:400px
                    height:250px
                    color:#fff
                    display:flex
                    flex-direction:column
                    justify-content:space-between
                    align-items:center
                    .title
                        text-align:center
                        h1
                            font-size:30px
                            line-height:70px
                        span
                            font-size:20px
                    .circle
                            width:20px
                            height:20px
                            border-radius:50%
                            background-color:#fff
                    .understand
                            border: 1px solid #fff
                            text-align:center
                            line-height: 20px
                            padding:10px 20px
                            text-align:center
                            cursor:pointer
        .wrap
            // width:900px
            margin: 0 auto
            .cooperation
                width:1200px
                margin: 0 auto
                .title
                    width:118px
                    height:28px
                    margin:100px auto
                    position:relative
                    &:before
                        content:''
                        display:block
                        width:152px
                        height:2px
                        background-color:#424C8F
                        position:absolute
                        top: 38px;
                        left: -16px;
                .content
                    display:flex
                    justify-content: space-between
                .culture
                    width:60%
                    display:flex
                    justify-content: space-between
                    margin:50px auto
                .content,.culture 
                    .message
                        width:221px
                        height:260px
                        display:flex
                        flex-direction:column
                        justify-content: space-between
                        align-items:center

                        .top
                            width:221px
                            height:148px

                        .middle
                            width:142px
                            height:24px
                        .bottom
                            width:100%
                            font-size:18px
                            line-height:25px
                            color:#424C8F
                            letter-spacing:1px
            .apply
                width:900px
                height:350px
                margin: 0 auto
                .title
                    width:116px
                    height:29px
                    margin:100px auto
                .con
                    display:flex
                    justify-content:space-around
                    align-items:center
                    padding-left:60px
                    .arrow
                        width:99px
                        height:41px
                    .appl
                        width:79px
                        height:95px
                    .downline
                        width:87px
                        height:87px
                    .what
                        width:115px
                        height:101px
                    .last   
                        width:113px
                        height:87px
            .immediately
                width:170px
                height:40px
                line-height:40px
                border-radius:10px
                border: 2px solid #5d63a6
                background-color:#8e7de7
                text-align:center
                margin:0 auto
                // margin-left:60px
                margin-bottom: 150px
                box-shadow:0 0 10px 0 #5d63a6 
                color:#fff
                font-size:20px


</style>